<template>
  <div id="desktop">
    <div class="row">
      <div class="employee" id="employeeEducation"></div>
      <div class="employee" id="employeeGender"></div>
      <div class="employee" id="employeeExperience"></div>
    </div>
    <div class="row">
      <div class="flow">
        <div class="title">执行中的流程</div>
        <div>123个</div>
      </div>
      <div class="flow">
        <div class="title">已完结的流程</div>
        <div>858个</div>
      </div>
      <div class="flow">
        <div class="title">超期处理的流程</div>
        <div>333个</div>
      </div>
      <div class="flow">
        <div class="title">异常终止的流程</div>
        <div>123个</div>
      </div>
      <div class="flow">
        <div class="title">流程环节平均处理时长</div>
        <div>26小时</div>
      </div>
      <div class="flow">
        <div class="title">流程模板数量</div>
        <div>89个</div>
      </div>
      <div class="flow">
        <div class="title">表单模板数量</div>
        <div>159个</div>
      </div>
      <div class="flow">
        <div class="title">流程表单使用人数</div>
        <div>326人</div>
      </div>
    </div>
    <div class="row">
      <div class="product" id="productView"></div>
      <div class="product" id="productSell"></div>
    </div>
  </div>
</template>
<script>
var echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
require("echarts/lib/component/title");
export default {
  data() {
    return {};
  },
  beforeRouteLeave(to, from, next) {
    this.removeContainerStyle();
    next();
  },
  beforeRouteUpdate(to, from, next) {
    this.removeContainerStyle();
    next();
  },
  mounted() {
    this.setContainerStyle();
    this.employeeEducation();
    this.employeeGender();
    this.employeeExperience();
    this.productView();
    this.productSell();
  },
  methods: {
    removeContainerStyle() {
      let dom = document.querySelector("#desktop");
      dom.parentElement.attributes.removeNamedItem("style");
      dom.parentElement.parentElement.attributes.removeNamedItem("style");
    },
    setContainerStyle() {
      let dom = document.querySelector("#desktop");
      dom.parentElement.style = "padding:0px;box-shadow:none;";
      dom.parentElement.parentElement.style = "padding:0px;";
    },
    productView() {
      var myChart = echarts.init(document.getElementById("productView"));
      myChart.setOption({
        title: {
          y: "bottom",
          show: true,
          text: "产品访问次数统计",
          left: "center",
          textStyle: {
            fontSize: 15,
            fontWeight: "bold"
          },
          bottom: 0
        },
        xAxis: {
          type: "category",
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天"
          ]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 232, 501, 434, 890, 630, 1320],
            type: "line"
          }
        ]
      });
    },
    productSell() {
      let option = {
        title: {
          y: "bottom",
          show: true,
          text: "产品销售数据统计",
          left: "center",
          textStyle: {
            fontSize: 15,
            fontWeight: "bold"
          },
          bottom: 0
        },
        color: ["#3398DB"],
        xAxis: [
          {
            type: "category",
            data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [10, 52, 200, 134, 380, 280, 580]
          }
        ]
      };
      var myChart = echarts.init(document.getElementById("productSell"));
      myChart.setOption(option);
    },
    employeeEducation() {
      var myChart = echarts.init(document.getElementById("employeeEducation"));
      myChart.setOption({
        title: {
          y: "bottom",
          show: true,
          text: "员工学历分布",
          left: "center",
          textStyle: {
            fontSize: 15,
            fontWeight: "bold"
          },
          bottom: 0
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            data: [
              { value: 35, name: "博士及博士以上" },
              { value: 210, name: "研究生学历" },
              { value: 274, name: "本科学历" },
              { value: 135, name: "大专学历" },
              { value: 100, name: "其他学历" }
            ]
          }
        ]
      });
    },
    employeeGender() {
      var myChart = echarts.init(document.getElementById("employeeGender"));
      myChart.setOption({
        title: {
          y: "bottom",
          show: true,
          text: "员工性别比例",
          left: "center",
          textStyle: {
            fontSize: 15,
            fontWeight: "bold"
          },
          bottom: 0
        },
        series: [
          {
            radius: "60%",
            type: "pie",
            data: [{ value: 160, name: "女生" }, { value: 280, name: "男生" }]
          }
        ]
      });
    },
    employeeExperience() {
      var myChart = echarts.init(document.getElementById("employeeExperience"));
      myChart.setOption({
        title: {
          y: "bottom",
          show: true,
          text: "员工从业经验分布",
          left: "center",
          textStyle: {
            fontSize: 15,
            fontWeight: "bold"
          },
          bottom: 0
        },
        series: [
          {
            type: "pie",
            radius: "60%",
            data: [
              { value: 35, name: "10年以上" },
              { value: 210, name: "8年以上" },
              { value: 274, name: "6年以上" },
              { value: 135, name: "3年以上" },
              { value: 100, name: "3年以下" },
              { value: 18, name: "实习生" }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang="scss">
#desktop {
  background: #f6f6f6;
  height: 100%;
  padding: 8px;
  .row {
    display: flex;
    > div {
      flex: 1;
      margin: 8px;
      background: #fff;
    }
    .employee {
      height: 280px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      padding-bottom: 16px;
    }
    .flow {
      padding-bottom: 10px;
      padding-top: 10px;
      height: 80px;
      text-align: center;
      line-height: 30px;
      &:hover {
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      }
      .title {
        font-weight: bold;
      }
    }
    .product {
      height: 360px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      padding-bottom: 16px;
    }
  }
}
</style>